<template>
  <!--  html标签上-->
  <h4>html 标签上(vue2 @input)</h4>
  默认 model: {{ model }} <input type="text" v-model="model" /><br />
  modelV2: {{ modelV2 }}
  <input
    type="text"
    :value="modelV2"
    @input="modelV2 = (<HTMLInputElement>$event.target).value"
  /><br />
  <hr />
  <!-- 默认 组件上 -->
  <h4>默认 组件上</h4>
  默认 obj1: {{ obj1 }}<modelChild v-model="obj1"></modelChild>
  <!-- 原理 -->
  原理 modelValue:{{ modelValue }}
  <modelChild
    :model-value="modelValue"
    @update:modelValue="modelValue = $event"
  ></modelChild
  ><br />
  <!-- 别名 -->
  别名 obj2: {{ obj2 }}<modelChild v-model:objVal1="obj2"></modelChild><br />
  别名 obj3: {{ obj3 }} <modelChild v-model:objVal2="obj3"></modelChild><br />
</template>
<script setup lang="ts">
import modelChild from "@/components/sub/model-child.vue";
import { ref } from "vue";
let modelV2 = ref("modelV2");
let model = ref("model");

let modelValue = ref("modelValue");
let obj1 = ref("obj1");
let obj2 = ref("obj2");
let obj3 = ref("obj3");
</script>
<style lang="scss" scoped></style>
